import React, { memo, useCallback, useEffect, useState } from 'react';
import { Button, message, Modal, Transfer } from 'antd';
import { queryStaffEditBaseItemList, onEditStaffBaseInfoList } from '@/services/salaryManage/salaryCalculate';
import If from '@/components/If';
import { useUpdateEffect } from 'react-use'
import styles from '../../../index.less'
import AddStaffInfoModal from '../../../components/AddStatffInfoModal';

const AddBaseInfoItemModal = ({
    visible = false,
    onCancel = () => {},
    onSave = () => {},
    currentSelectYear,
    currentOrgCode
}) => {
    const [oriTargetKeys, setOriTargetKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [dataSource, setDataSource] = useState([]);
    const [baseInfoModalLoading, setBaseInfoModalLoading] = useState(false);
    const [staffInfoModalVisible, setStaffInfoModalVisible] = useState(false);
    const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
    };
    const handleChange = nextTargetKeys => {
        setOriTargetKeys(nextTargetKeys);
    };
    // 获取基本信息配置项列表
    const getBaseInfoList = async () => {
        try {
            const { code, data = {} } = await queryStaffEditBaseItemList(currentOrgCode, currentSelectYear);
            if (code === 10000) {
                const allItem = (data.allItem || []).map(item => ({
                    key: item.id,
                    title: item.itemName,
                    disabled: item.fixed
                }));
                const usedItem = (data.usedItem || []).map(item => item.id);
                setDataSource(allItem);
                setOriTargetKeys(usedItem);
            }
            console.log('基本信息配置项列表')
        } catch (e) {
            console.log(e);
        }
    };
    const onSaveBaseInfoSetting = async () => {
        try {
            setBaseInfoModalLoading(true);
            console.log(oriTargetKeys, selectedKeys);
            const { code } = await onEditStaffBaseInfoList({
                organizationCode: currentOrgCode,
                year: currentSelectYear,
                salaryItemIds: oriTargetKeys
            });
            if (code === 10000) {
                message.success('保存成功！');
                onCancel();
                onSave();
            }
            setBaseInfoModalLoading(false);
        } catch (e) {
            console.log(e);
            setBaseInfoModalLoading(false);
        }
    };
    const onCloseModal = useCallback(() => {
        setStaffInfoModalVisible(false);
    }, []);
    const onOpenModal = useCallback(() => {
        setStaffInfoModalVisible(true);
    }, []);
    const onRefreshList = useCallback(() => {
        setStaffInfoModalVisible(false);
    }, []);
    useEffect(() => {
        if (visible) {
            getBaseInfoList();
        }
    }, [visible]);
    useUpdateEffect(() => {
        getBaseInfoList();
    }, [staffInfoModalVisible])
    return <Modal
        title="添加配置"
        width={640}
        visible={visible}
        onOk={onSaveBaseInfoSetting}
        onCancel={onCancel}
        className={styles.baseInfoAddModal}
        confirmLoading={baseInfoModalLoading}
    >
        <div style={{ padding: '16px 12px 20px' }}>
            <Transfer
                dataSource={dataSource}
                listStyle={{
                    width: 276,
                    height: 414
                }}
                titles={['员工基本要素', '已添加']}
                targetKeys={oriTargetKeys}
                selectedKeys={selectedKeys}
                onChange={handleChange}
                onSelectChange={handleSelectChange}
                render={item => item.title}
            />
            <Button className={styles.baseInfoSettingAddBtn} onClick={onOpenModal}>新增配置</Button>
            <If condition={staffInfoModalVisible}>
                <AddStaffInfoModal
                    visible={staffInfoModalVisible}
                    onCancel={onCloseModal}
                    onChange={onRefreshList}
                    currentOrgCode={currentOrgCode}
                />
            </If>
        </div>
    </Modal>
};
export default memo(AddBaseInfoItemModal)
